<template>
  <main class="min-h-screen bg-white">
    <!-- 行业解决方案部分 -->
    <section class="container mx-auto px-2 py-6">
      <div class="mb-4">
        <h3 class="text-lg font-bold text-gray-800">行业解决方案</h3>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
        <!-- 金融保险 -->
        <div class="relative group">
          <div class="aspect-w-1 aspect-h-1 bg-gray-100 rounded-md overflow-hidden">
            <img 
              src="https://picsum.photos/seed/finance/300/200"
              alt="金融保险" 
              class="object-cover w-full h-40 transition-transform group-hover:scale-105"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
              <span class="text-white p-2 font-medium">金融保险</span>
            </div>
          </div>
          <div class="mt-2 flex items-center justify-center">
            <input type="radio" id="finance" name="industry" class="mr-2">
            <label for="finance" class="text-sm text-gray-600">金融保险</label>
          </div>
        </div>
        
        <!-- 零售批发 -->
        <div class="relative group">
          <div class="aspect-w-1 aspect-h-1 bg-gray-100 rounded-md overflow-hidden">
            <img 
              src="https://picsum.photos/seed/retail/300/200"
              alt="零售批发" 
              class="object-cover w-full h-40 transition-transform group-hover:scale-105"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
              <span class="text-white p-2 font-medium">零售批发</span>
            </div>
          </div>
          <div class="mt-2 flex items-center justify-center">
            <input type="radio" id="retail" name="industry" class="mr-2">
            <label for="retail" class="text-sm text-gray-600">零售批发</label>
          </div>
        </div>
        
        <!-- 生产制造 -->
        <div class="relative group">
          <div class="aspect-w-1 aspect-h-1 bg-gray-100 rounded-md overflow-hidden">
            <img 
              src="https://picsum.photos/seed/manufacturing/300/200"
              alt="生产制造" 
              class="object-cover w-full h-40 transition-transform group-hover:scale-105"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
              <span class="text-white p-2 font-medium">生产制造</span>
            </div>
          </div>
          <div class="mt-2 flex items-center justify-center">
            <input type="radio" id="manufacturing" name="industry" class="mr-2">
            <label for="manufacturing" class="text-sm text-gray-600">生产制造</label>
          </div>
        </div>
        
        <!-- 餐饮酒店 -->
        <div class="relative group">
          <div class="aspect-w-1 aspect-h-1 bg-gray-100 rounded-md overflow-hidden">
            <img 
              src="https://picsum.photos/seed/hospitality/300/200"
              alt="餐饮酒店" 
              class="object-cover w-full h-40 transition-transform group-hover:scale-105"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
              <span class="text-white p-2 font-medium">餐饮酒店</span>
            </div>
          </div>
          <div class="mt-2 flex items-center justify-center">
            <input type="radio" id="hospitality" name="industry" class="mr-2">
            <label for="hospitality" class="text-sm text-gray-600">餐饮酒店</label>
          </div>
        </div>
        
        <!-- 大健康行业 -->
        <div class="relative group">
          <div class="aspect-w-1 aspect-h-1 bg-gray-100 rounded-md overflow-hidden">
            <img 
              src="https://picsum.photos/seed/healthcare/300/200"
              alt="大健康行业" 
              class="object-cover w-full h-40 transition-transform group-hover:scale-105"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
              <span class="text-white p-2 font-medium">大健康行业</span>
            </div>
          </div>
          <div class="mt-2 flex items-center justify-center">
            <input type="radio" id="healthcare" name="industry" class="mr-2">
            <label for="healthcare" class="text-sm text-gray-600">大健康行业</label>
          </div>
        </div>
      </div>
    </section>

    <!-- 功能区块部分 -->
    <section class="container mx-auto px-2 py-6">
      <!-- 课程功能标签 -->
      <div class="flex flex-wrap gap-2 mb-6 border-b">
        <button class="px-4 py-2 text-sm border-b-2 border-red-600 text-red-600 font-medium">
          证书颁发
        </button>
        <button class="px-4 py-2 text-sm border-b-2 border-transparent text-gray-600 hover:text-red-600 hover:border-red-600 transition-colors">
          培训地图
        </button>
        <button class="px-4 py-2 text-sm border-b-2 border-transparent text-gray-600 hover:text-red-600 hover:border-red-600 transition-colors">
          培训内容
        </button>
        <button class="px-4 py-2 text-sm border-b-2 border-transparent text-gray-600 hover:text-red-600 hover:border-red-600 transition-colors">
          课程任务
        </button>
        <button class="px-4 py-2 text-sm border-b-2 border-transparent text-gray-600 hover:text-red-600 hover:border-red-600 transition-colors">
          课程转码
        </button>
        <button class="px-4 py-2 text-sm border-b-2 border-transparent text-gray-600 hover:text-red-600 hover:border-red-600 transition-colors">
          课后练习
        </button>
        <button class="px-4 py-2 text-sm border-b-2 border-transparent text-gray-600 hover:text-red-600 hover:border-red-600 transition-colors">
          安全管控
        </button>
        <button class="px-4 py-2 text-sm border-b-2 border-transparent text-gray-600 hover:text-red-600 hover:border-red-600 transition-colors">
          观看限制
        </button>
        <button class="px-4 py-2 text-sm border-b-2 border-transparent text-gray-600 hover:text-red-600 hover:border-red-600 transition-colors">
          直播回放
        </button>
      </div>

      <!-- 功能区块网格 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- 考试管理 -->
        <div class="bg-white border border-gray-200 rounded-md p-4 hover:shadow-md transition-shadow">
          <div class="flex items-center mb-3">
            <div class="bg-red-100 p-2 rounded-full mr-3">
              <i class="fa fa-pencil-square-o text-red-600"></i>
            </div>
            <h3 class="text-lg font-bold text-gray-800">考试管理</h3>
          </div>
          <div class="grid grid-cols-2 gap-2 mb-4">
            <a href="#" class="text-sm text-gray-600 hover:text-red-600 flex items-center">
              <i class="fa fa-file-text-o mr-1"></i> 导入导出
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-red-600 flex items-center">
              <i class="fa fa-book mr-1"></i> 考试练习
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-red-600 flex items-center">
              <i class="fa fa-random mr-1"></i> 组卷阅卷
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-red-600 flex items-center">
              <i class="fa fa-calendar mr-1"></i> 每日一练
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-red-600 flex items-center">
              <i class="fa fa-search mr-1"></i> 防作弊
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-red-600 flex items-center">
              <i class="fa fa-trophy mr-1"></i> MOEPK
            </a>
          </div>
        </div>

        <!-- 社区管理 -->
        <div class="bg-white border border-gray-200 rounded-md p-4 hover:shadow-md transition-shadow">
          <div class="flex items-center mb-3">
            <div class="bg-blue-100 p-2 rounded-full mr-3">
              <i class="fa fa-comments text-blue-600"></i>
            </div>
            <h3 class="text-lg font-bold text-gray-800">社区管理</h3>
          </div>
          <div class="grid grid-cols-2 gap-2 mb-4">
            <a href="#" class="text-sm text-gray-600 hover:text-blue-600 flex items-center">
              <i class="fa fa-cloud-upload mr-1"></i> 微课上传
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-blue-600 flex items-center">
              <i class="fa fa-comment mr-1"></i> 评论管理
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-blue-600 flex items-center">
              <i class="fa fa-check-square-o mr-1"></i> 内容审核
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-blue-600 flex items-center">
              <i class="fa fa-star mr-1"></i> 评论置顶
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-blue-600 flex items-center">
              <i class="fa fa-exchange mr-1"></i> 问答交流
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-blue-600 flex items-center">
              <i class="fa fa-thumbs-up mr-1"></i> 社区打赏
            </a>
          </div>
        </div>

        <!-- 人才发展 -->
        <div class="bg-white border border-gray-200 rounded-md p-4 hover:shadow-md transition-shadow">
          <div class="flex items-center mb-3">
            <div class="bg-green-100 p-2 rounded-full mr-3">
              <i class="fa fa-users text-green-600"></i>
            </div>
            <h3 class="text-lg font-bold text-gray-800">人才发展</h3>
          </div>
          <div class="grid grid-cols-2 gap-2 mb-4">
            <a href="#" class="text-sm text-gray-600 hover:text-green-600 flex items-center">
              <i class="fa fa-line-chart mr-1"></i> 能力模型
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-green-600 flex items-center">
              <i class="fa fa-search-plus mr-1"></i> 人才测评
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-green-600 flex items-center">
              <i class="fa fa-bar-chart mr-1"></i> 测评工具
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-green-600 flex items-center">
              <i class="fa fa-user-circle-o mr-1"></i> 人才画像
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-green-600 flex items-center">
              <i class="fa fa-sitemap mr-1"></i> 岗位地图
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-green-600 flex items-center">
              <i class="fa fa-graduation-cap mr-1"></i> 职业体系
            </a>
          </div>
        </div>

        <!-- 统计中心 -->
        <div class="bg-white border border-gray-200 rounded-md p-4 hover:shadow-md transition-shadow">
          <div class="flex items-center mb-3">
            <div class="bg-purple-100 p-2 rounded-full mr-3">
              <i class="fa fa-bar-chart text-purple-600"></i>
            </div>
            <h3 class="text-lg font-bold text-gray-800">统计中心</h3>
          </div>
          <div class="grid grid-cols-2 gap-2 mb-4">
            <a href="#" class="text-sm text-gray-600 hover:text-purple-600 flex items-center">
              <i class="fa fa-calendar-check-o mr-1"></i> 培训统计
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-purple-600 flex items-center">
              <i class="fa fa-list-alt mr-1"></i> 课程统计
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-purple-600 flex items-center">
              <i class="fa fa-pencil-square-o mr-1"></i> 考试统计
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-purple-600 flex items-center">
              <i class="fa fa-users mr-1"></i> 人员统计
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-purple-600 flex items-center">
              <i class="fa fa-database mr-1"></i> 数据大屏
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-purple-600 flex items-center">
              <i class="fa fa-download mr-1"></i> 导出管理
            </a>
          </div>
        </div>

        <!-- 权限管理 -->
        <div class="bg-white border border-gray-200 rounded-md p-4 hover:shadow-md transition-shadow">
          <div class="flex items-center mb-3">
            <div class="bg-yellow-100 p-2 rounded-full mr-3">
              <i class="fa fa-lock text-yellow-600"></i>
            </div>
            <h3 class="text-lg font-bold text-gray-800">权限管理</h3>
          </div>
          <div class="grid grid-cols-2 gap-2 mb-4">
            <a href="#" class="text-sm text-gray-600 hover:text-yellow-600 flex items-center">
              <i class="fa fa-sitemap mr-1"></i> 组织结构
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-yellow-600 flex items-center">
              <i class="fa fa-briefcase mr-1"></i> 岗位管理
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-yellow-600 flex items-center">
              <i class="fa fa-tags mr-1"></i> 标签管理
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-yellow-600 flex items-center">
              <i class="fa fa-user-circle mr-1"></i> 角色设置
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-yellow-600 flex items-center">
              <i class="fa fa-key mr-1"></i> 权限设置
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-yellow-600 flex items-center">
              <i class="fa fa-unlock-alt mr-1"></i> 不限数量
            </a>
          </div>
        </div>

        <!-- 课程商城 -->
        <div class="bg-white border border-gray-200 rounded-md p-4 hover:shadow-md transition-shadow">
          <div class="flex items-center mb-3">
            <div class="bg-indigo-100 p-2 rounded-full mr-3">
              <i class="fa fa-shopping-cart text-indigo-600"></i>
            </div>
            <h3 class="text-lg font-bold text-gray-800">课程商城</h3>
          </div>
          <div class="grid grid-cols-2 gap-2 mb-4">
            <a href="#" class="text-sm text-gray-600 hover:text-indigo-600 flex items-center">
              <i class="fa fa-book mr-1"></i> 岗位课程
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-indigo-600 flex items-center">
              <i class="fa fa-building mr-1"></i> 办公技能
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-indigo-600 flex items-center">
              <i class="fa fa-heart mr-1"></i> 职业素养
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-indigo-600 flex items-center">
              <i class="fa fa-graduation-cap mr-1"></i> 中高层管理
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-indigo-600 flex items-center">
              <i class="fa fa-industry mr-1"></i> 行业课程
            </a>
            <a href="#" class="text-sm text-gray-600 hover:text-indigo-600 flex items-center">
              <i class="fa fa-microphone mr-1"></i> 讲师资源
            </a>
          </div>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="flex justify-center mt-8 space-x-4">
        <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-md transition-colors font-medium text-lg">
          免费试用
        </button>
        <button class="border border-red-600 text-red-600 hover:bg-red-50 px-6 py-3 rounded-md transition-colors font-medium text-lg">
          立即咨询
        </button>
      </div>
    </section>

    <!-- 右侧悬浮按钮 -->
    <div class="fixed right-4 bottom-8 flex flex-col space-y-2">
      <!-- 在线咨询 -->
      <div class="bg-red-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg cursor-pointer hover:bg-red-700 transition-colors">
        <i class="fa fa-headphones text-xl"></i>
      </div>
      <!-- 免费试用 -->
      <div class="bg-white text-red-600 w-12 h-12 rounded-full flex items-center justify-center shadow-lg cursor-pointer hover:bg-gray-50 transition-colors border border-red-600">
        <i class="fa fa-gift text-xl"></i>
      </div>
      <!-- 微信客服 -->
      <div class="bg-white text-green-600 w-12 h-12 rounded-full flex items-center justify-center shadow-lg cursor-pointer hover:bg-gray-50 transition-colors border border-green-600">
        <i class="fa fa-weixin text-xl"></i>
      </div>
      <!-- 帮助中心 -->
      <div class="bg-white text-blue-600 w-12 h-12 rounded-full flex items-center justify-center shadow-lg cursor-pointer hover:bg-gray-50 transition-colors border border-blue-600">
        <i class="fa fa-question-circle text-xl"></i>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  name: 'MoboxCloudHome'
}
</script>

<style scoped>
/* 自定义样式 */
</style>